<script setup lang='ts'>
import { ref,onMounted } from 'vue'
import iconList from '@/utils/iconList'
defineProps({
  form: {
    type: Object,
    required: true
  }
})
let iconObj = [
  {
    name: '三维总览',
    iconUrl: new URL('../../../assets/icon-Unchecked/3DOverview.png', import.meta.url).href
  },
  {
    name: '三轴管理',
    iconUrl: new URL('../../../assets/icon-Unchecked/ThreeAxisManage.png', import.meta.url).href
  },
  {
    name: '作业区',
    iconUrl: new URL('../../../assets/icon-Unchecked/OperationArea.png', import.meta.url).href
  },
  {
    name: '俯仰电机',
    iconUrl: new URL('../../../assets/icon-Unchecked/PitchMotor.png',import.meta.url).href
  },
  {
    name: '倾角仪',
    iconUrl: new URL('../../../assets/icon-Unchecked/Inclinometer.png',import.meta.url).href
  },
  {
    name: '公司',
    iconUrl: new URL('../../../assets/icon-Unchecked/Company.png',import.meta.url).href
  },
  {
    name: '公司管理',
    iconUrl: new URL('../../../assets/icon-Unchecked/CompanyManage.png',import.meta.url).href
  },
  {
    name: '回转减速箱',
    iconUrl: new URL('../../../assets/icon-Unchecked/RotaryGearbox.png',import.meta.url).href
  },
  {
    name: '回转电机',
    iconUrl: new URL('../../../assets/icon-Unchecked/RotaryMotor.png',import.meta.url).href
  },
  {
    name: '堆取料机',
    iconUrl: new URL('../../../assets/icon-Unchecked/StackerReclaimer.png',import.meta.url).href
  },
  {
    name: '堆取料机管理',
    iconUrl: new URL('../../../assets/icon-Unchecked/StackerReclaimerManage.png',import.meta.url).href
  },
  {
    name: '巡检仪管理',
    iconUrl: new URL('../../../assets/icon-Unchecked/InspectionInstrumentManage.png',import.meta.url).href
  },
  {
    name: '手持信息',
    iconUrl: new URL('../../../assets/icon-Unchecked/HandheldInformation.png',import.meta.url).href
  },
  {
    name: '斗轮电机',
    iconUrl: new URL('../../../assets/icon-Unchecked/BucketWheelMotor.png',import.meta.url).href
  },
  {
    name: '权限配置',
    iconUrl: new URL('../../../assets/icon-Unchecked/PermissionConfig.png',import.meta.url).href
  },
  {
    name: '港口',
    iconUrl: new URL('../../../assets/icon-Unchecked/Port.png',import.meta.url).href
  },
  {
    name: '港口管理',
    iconUrl: new URL('../../../assets/icon-Unchecked/PortManage.png',import.meta.url).href
  },
  {
    name: '生产统计',
    iconUrl: new URL('../../../assets/icon-Unchecked/ProductionStatistics.png',import.meta.url).href
  },
  {
    name: '用户管理',
    iconUrl: new URL('../../../assets/icon-Unchecked/UserManage.png',import.meta.url).href
  },
  {
    name: '电气信息',
    iconUrl: new URL('../../../assets/icon-Unchecked/ElectricalInformation.png',import.meta.url).href
  },
  {
    name: '皮带减速机',
    iconUrl: new URL('../../../assets/icon-Unchecked/BeltReducer.png',import.meta.url).href
  },
  {
    name: '皮带机滚筒',
    iconUrl: new URL('../../../assets/icon-Unchecked/BeltConveyorDrum.png',import.meta.url).href
  },
  {
    name: '皮带电机',
    iconUrl: new URL('../../../assets/icon-Unchecked/BeltMotor.png',import.meta.url).href
  },
  {
    name: '系统配置',
    iconUrl: new URL('../../../assets/icon-Unchecked/SystemConfig.png',import.meta.url).href
  },
  {
    name: '编号',
    iconUrl: new URL('../../../assets/icon-Unchecked/CodeUnselect.png',import.meta.url).href
  },
  {
    name: '考勤管理',
    iconUrl: new URL('../../../assets/icon-Unchecked/AttendanceManage.png',import.meta.url).href
  },
  {
    name: '设备管理',
    iconUrl: new URL('../../../assets/icon-Unchecked/EquipmentManage.png',import.meta.url).href
  },
  {
    name: '诊断详情',
    iconUrl: new URL('../../../assets/icon-Unchecked/DiagnosticDetails.png',import.meta.url).href
  },
  {
    name: '金属结构监评',
    iconUrl: new URL('../../../assets/icon-Unchecked/MetalStructure.png',import.meta.url).href
  },
  {
    name: '钢结构管理',
    iconUrl: new URL('../../../assets/icon-Unchecked/SteelStructureManage.png',import.meta.url).href
  },
  {
    name: '风速',
    iconUrl: new URL('../../../assets/icon-Unchecked/WindSpeed.png',import.meta.url).href
  }
]
// 定义变量
let imgList:any = ref([
  new URL('../../../assets/icon-Unchecked/3DOverview.png',import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/ThreeAxisManage.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/OperationArea.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/PitchMotor.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/Inclinometer.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/Company.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/CompanyManage.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/RotaryGearbox.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/RotaryMotor.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/StackerReclaimer.png', import.meta.url).href, 
  new URL('../../../assets/icon-Unchecked/StackerReclaimerManage.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/InspectionInstrumentManage.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/HandheldInformation.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/BucketWheelMotor.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/PermissionConfig.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/Port.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/PortManage.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/ProductionStatistics.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/UserManage.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/ElectricalInformation.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/BeltReducer.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/BeltConveyorDrum.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/BeltMotor.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/SystemConfig.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/CodeUnselect.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/AttendanceManage.png',import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/EquipmentManage.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/DiagnosticDetails.png',import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/MetalStructure.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/SteelStructureManage.png', import.meta.url).href,
  new URL('../../../assets/icon-Unchecked/WindSpeed.png', import.meta.url).href
])
const imgItem = ref() 
const defauIcon = ref()
const iconNmae = ref()
const click = ref(false)

// 定义函数
onMounted(() => {
  defauIcon.value = imgList.value[24]
  console.log('获取图标文件---->',  defauIcon,imgList)
})
const clickRouter = item => {
  imgItem.value = item.iconUrl
  iconNmae.value = item.name
  click.value = false
}

const clickSelect = () => {
  if (click.value === false) {
    click.value = true
  } else {
    click.value = false
  }
}
</script>
<template>
  <div class="select-img">
    <div
      class="select-checkd icon-checkd"
      @mousedown="clickSelect"
    >
      <span class="select-checkd-img">
        <img
          v-if="imgItem"
          :src="imgItem"
        >
        <img
          v-else-if="form.icon"
          :src="'@/assets/icon-Unchecked/' + form.icon + '.png'"
        >
        <img
          v-else
          class="el-icon-edit"
          :src="defauIcon"
        >
      </span>
      <span
        v-if="imgItem"
        class="select-checkd-text"
      >{{ iconNmae }}</span>
      <span
        v-else-if="form.icon"
        class="select-checkd-text"
      >{{ form.icon }}</span>
      <span
        v-else
        class="select-checkd-text"
        style="  color: #b1b4b8;"
      >请选择图标</span>
    </div>
    <div
      v-if="click"
      class="select-option-img"
    >
      <div
        v-for="(item, index) in iconList"
        :key="index"
        class="item-img"
      >
        <img
          :src="item.iconUrl"
          @mousedown="clickRouter(item)"
        >
      </div>

      <!-- <img v-for="(item, index) in imgList" :key="index" :src='require("../assets/icon-Unchecked/" + item + ".png")'  @mousedown="clickRouter(item, $event)"></img> -->
    </div>
  </div>
</template>

<style scoped lang=scss>
.select-img {
  position: relative;
  width: 100%;
  overflow: hidden;

  .select-checkd {
    display: flex;
    width: 100%;
    height: 40px;
    border: 1px solid rgb(198 196 196);
    border-radius: 4px;

    .select-checkd-img {
      display: block;
      display: flex;
      justify-content: center;
      width: 55px;
      padding: 9px 0 0;
      line-height: 40px;

      // height: 60px;
      background: #f5f7fa;

      > img {
        display: flex;
        justify-content: center;
        width: 22px;
        height: 22px;
      }
    }

    .select-checkd-text {
      text-indent: 1em;
    }
  }

  .icon-checkd {
    /* width: 6.5%; */
  }

  .select-option-img {
    width: 100%;
    height: 5%;
    background: #fff;

    .item-img {
      float: left;
      width: 20px;
      height: 20px;
      margin: 10px;
    }
  }
}
</style>